<script setup lang="ts">
import sharedForm, { handleDynamicFormItemProps, handleDynamicElementProps } from '../sharedForm'
import type { FormConfigElement } from '../shared'
import { NFormItem, NTooltip, NIcon } from 'naive-ui'
import { QuestionMarkRound } from '@vicons/material'
import { ref, onMounted } from 'vue'

defineProps<{
  config: FormConfigElement
  flex?: string
  vars?: Record<string, unknown>
  labelSuffix?: string
  showLabel?: Boolean
  disabled?: Boolean
}>()

/**
 * 修复动态添加Subset后的样式问题
 */
const inst = ref<any>(null)
onMounted(() => inst.value.$forceUpdate())
</script>

<template>
  <NFormItem
    ref="inst"
    v-bind="handleDynamicFormItemProps(config, labelSuffix)"
    :label-style="showLabel === false ? 'display: none' : undefined"
  >
    <component
      :is="sharedForm.getElementByType(config.type)"
      v-bind="handleDynamicElementProps(config, vars)"
      :style="flex ? { flex } : null"
      :vars="vars"
      :disabled="disabled === true ? true : undefined"
    />
    <NTooltip
      v-if="config.promptProps?.content"
      v-bind="config.promptProps.tooltip"
    >
      <template #trigger>
        <div class="propmpt">
          <NIcon :size="16">
            <QuestionMarkRound />
          </NIcon>
        </div>
      </template>
      {{ config.promptProps.content }}
    </NTooltip>
  </NFormItem>
</template>

<style scoped>
.propmpt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #888;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.propmpt:hover {
  background-color: #ddd;
  color: #555;
}
</style>
